<template>
  <div id="members">
    <nav aria-label="breadcrumb" role="navigation">
      <ol class="breadcrumb">
        <li class="breadcrumb-item active">会员管理</li>
      </ol>
    </nav>

    <div class="card">
      <template v-if="isSearchMode">
        <div class="card-body">
          <form class="row">
            <div class="row mb-2">
              <input
                type="text"
                class="form-control me-sm-2"
                size="11"
                placeholder="用户名"
                v-model.trim="username"
              />
            </div>
            <div class="row mb-2">
              <input
                type="text"
                class="form-control me-sm-2"
                size="11"
                placeholder="手机"
                v-model.trim="mobile"
              />
            </div>
            <div class="row mb-2">
              <select class="form-select me-sm-2" v-model.number="userType">
                <option value="-1">所有会员</option>
                <option value="0">散客</option>
                <option value="1">企业</option>
              </select>
            </div>

            <div class="row mb-2">
              <button
                type="button"
                class="btn btn-primary mb-2"
                @click.stop="search()"
              >
                查找
              </button>
              <button
                type="button"
                class="btn btn-secondary"
                @click.stop="reset()"
              >
                重置
              </button>
            </div>
          </form>
        </div>
      </template>
      <template v-else>
        <div class="card-body">
          <button
            type="button"
            class="btn btn-primary float-end"
            @click.stop="showSearch()"
          >
            查找
          </button>
        </div>
        <nav id="pagination-box-1" class="float-end">
          <my-pagination
            name="pagination"
            :row-count="sc.rowCount"
            :page-total="sc.pageTotal"
            :page-no="sc.pageNo"
            @next-page="nextPage"
            @prev-page="prevPage"
            @direct-page="directPage"
          ></my-pagination>
        </nav>
        <div
          class="card-body d-md-none mb-0 pb-0"
          v-for="(user, index) in userList"
          :key="user.username"
        >
          <dl class="row mb-0">
            <dt class="col-3 text-end">用户名称</dt>
            <dd class="col-9">
              {{ user.empname
              }}<span class="text-info small">{{ user.username }}</span>
            </dd>
            <dt class="col-3 text-end">企业名称</dt>
            <dd class="col-9">{{ user.corpName }}</dd>
            <dt class="col-3 text-end">手机</dt>
            <dd class="col-9">{{ user.mobileNo }}</dd>
            <dt class="col-3 text-end">邮件</dt>
            <dd class="col-9">{{ user.email }}</dd>
            <dt class="col-3 text-end">微信公众号用户</dt>
          <dd class="col-9">
              <template v-for="info of user.wxsUsers">
                <img :src="info.avatar" width="25" height="25" />
                <span class="text-truncate" style="max-width: 80px">{{
                  info.nick
                }} </span>
              </template>
            </dd>
            <dt class="col-3 text-end"></dt>
            <dd class="col-9 text-end"><router-link :to="`/admin/member/` + user.id">详情</router-link></dd>
          </dl>
        </div>

        <table class="table table-striped table-hover d-none d-md-table">
          <thead>
            <tr>
              <th></th>
              <th>全名</th>
              <th>用户类型</th>
              <th>手机</th>
              <th>邮件</th>
              <th>微信公众号用户</th>
              <th>企业名称</th>
              <th>企业详情</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(user, index) in userList" :key="user.username">
              <td>{{ user.username }}</td>
              <td>{{ user.empname }}</td>
              <td>
                <template v-if="user.userType === 0">散客</template>
                <template v-else-if="user.userType === 1">企业</template>
              </td>
              <td>{{ user.mobileNo }}</td>
              <td>{{ user.email }}</td>
              <td>
                <template v-for="info of user.wxsUsers">
                  <img :src="info.avatar" width="25" height="25" />
                  <span class="text-truncate" style="max-width: 80px">{{
                    info.nick
                  }}{{info.openId}}</span>
                  <br />
                </template>
              </td>
              <td>{{ user.corpName }}</td>
              <td>
                <template v-if="user.enterpriseId > 0">
                  <router-link
                    :to="`/admin/member/` + user.id"
                    >详情</router-link
                  >
                </template>
              </td>
            </tr>
          </tbody>
        </table>

        <nav id="pagination-box-2" class="float-end">
          <my-pagination
            name="pagination"
            :row-count="sc.rowCount"
            :page-total="sc.pageTotal"
            :page-no="sc.pageNo"
            @next-page="nextPage"
            @prev-page="prevPage"
            @direct-page="directPage"
          ></my-pagination>
        </nav>
      </template>
    </div>
  </div>
</template>

<script>
import { searchMembers } from "@/api/admin.js";
import MyPagination from "@/components/my-pagination.vue";

export default {
  name: "Members",
  components: {
    MyPagination,
  },
  data() {
    return {
      isSearchMode: false,
      sc: {
        rowCount: 0,
        pageNo: 1,
        pageSize: 10,
        pageTotal: 0,
      },
      username: "",
      mobile: "",
      userType: -1,

      userList: [],
    };
  },
  mounted: function () {
    this.search();
  },
  methods: {
    showErrMsg: function (msg, msgType) {
      this.$store.dispatch("showAlertMsg", {
        errMsg: msg,
        errMsgType: msgType,
      });
    },
    showLoading: function (loadingText) {
      this.$store.commit("showLoading", {
        loading: true,
        loadingText: loadingText,
      });
    },
    hideLoading: function () {
      this.$store.commit("showLoading", { loading: false });
    },
    showSearch: function () {
      this.isSearchMode = true;
    },
    search: function () {
      this.isSearchMode = false;
      this.showLoading();
      const params = {
        "sc.pageNo": this.sc.pageNo,
        "sc.pageSize": this.sc.pageSize,
        "sc.username": this.username,
        "sc.mobile": this.mobile,
        "sc.type": this.userType,
      };
      searchMembers(
        params,
        (v) => {
          this.userList = v.dataList;
          this.sc = v.page;
        },
        () => this.hideLoading()
      );
    },
    reset: function () {
      this.username = "";
      this.mobile = "";
      this.userType = -1;
    },
    prevPage: function () {
      this.sc.pageNo = this.sc.pageNo - 1;
      if (this.sc.pageNo < 1) this.sc.pageNo = 1;
      this.search();
    },
    nextPage: function () {
      this.sc.pageNo = this.sc.pageNo + 1;
      this.search();
    },
    directPage: function (pageNo) {
      this.sc.pageNo = pageNo;
      this.search();
    },
  },
};
</script>
